<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="随意吐槽（注意不要超过120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in list" :key="i">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.nickname}}&nbsp;&nbsp;发表时间：{{item.create_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content.indexOf('nbsp') != -1 ?'这个用户啥也没说': item.content }}
                </div>
            </div>
        </div>
        <!-- <mt-button type="danger" size="large" plain>加载更多</mt-button> -->
        <p>{{tips}}</p>
    </div>
</template>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size:18px;
    }    
    textarea{
        font-size:13px;
        height: 85px;
        margin: 0
    }
    .cmt-list{
        .cmt-item{
            font-size: 13px;
            margin: 5px 0;
            .cmt-title{
                background: #ccc;
                line-height:30px
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2
            }
        };
    }
}
</style>
<script>
import { Toast } from "mint-ui";
export default {
    data(){
        return {
            list:[],
            REQUIRE:true,
            loading:false,
            tips:"",
            page:1,
            msg:""
        } 
    },
    methods:{
        getComment(){
            // Toast('shishi')
            var that = this;
            console.log(this.id)
            this.REQUIRE = false;
            this.loading = true;
            this.tips = '努力加载中...';
            that.$http.get('http://h5.pre.meiktv.com/comment/list?video_id='+ this.id+'&page='+this.page+'&size=3' ).then(res=>{
                console.log(res.body)
                if(res.body.code == 200){
                    if(that.list >= res.body.data.list.length) return
                    var list = res.body.data.list
                    that.list = that.list.concat(list) ;
                    console.log(list)
                    // 请求的数据加载完成后，再次滚动到底部时，允许请求前一天数据
                    this.$nextTick(() => {
                        this.REQUIRE = true;
                        this.loading = false;
                    });
                }else{
                    this.tips = '连接失败，请稍后重试';
                    // 请求失败时，将 REQUIRE 置为 true，滚动到底部时，再次请求
                    this.REQUIRE = true;
                }
            })
        },
        scrollBottom() {
            var H = window.pageYOffset || document.body.scrollTop || document.body.scrollHeight;
            console.log('1',(window.screen.height + H))
            console.log('2',document.body.clientHeight)
        if (((window.screen.height + H) >= (document.body.clientHeight)) && this.REQUIRE) {
          // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据
          this.page++;
          this.getComment()
        }
      },
      postComment(){
            // 由于没有接口只能先本地提交了，正常应该是校验了有内容后调取接口，接口返回成功后把本地数据插入的this.list里去
            this.msg.trim()//jQuery中方法，去除字符串的两端的空格
            if(this.msg.length != 0){
                var listItem = {};
                listItem.create_time = new Date();
                listItem.nickname = '匿名者';
                listItem.content = this.msg;
                this.list.unshift(listItem);
                this.msg = ''
            }
            // this.$http.post('')
        }
    },
    props:['id'],
    created(){
        this.getComment()
    },
    mounted () {
      // 添加滚动事件，检测滚动到页面底部
      window.addEventListener('scroll', this.scrollBottom)
      
    }
    
}
</script>